import { ThemeProvider } from "@emotion/react";
import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
import { createTheme } from "@mui/material";
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import Typography from "@mui/material/Typography";

export default function DownloadRightAll(props: any) {
  const defaultTheme = createTheme({ palette: { mode: "light" } });
  return (
    <ThemeProvider theme={defaultTheme}>
      <Box
        sx={{
          p: "2px 4px",
          display: "flex",
          flexDirection: "column",
          width: 400,
        }}
      >
        <Typography
          sx={{ marginTop: "1rem", marginBottom: "1rem" }}
          variant="h6"
          component="div"
        >
          Structure{" "}
          <Box component="span" sx={{ color: "primary.main" }}>
            Download
          </Box>
        </Typography>
        <Fab
          variant="extended"
          color="primary"
          sx={{ marginTop: "1rem", textTransform: "none" }}
        >
          <CloudDownloadIcon sx={{ mr: 1 }} />
          Download All Structure
        </Fab>

        <Typography
          sx={{ marginTop: "3rem", marginBottom: "1rem" }}
          variant="h6"
          component="div"
        >
          Genome{" "}
          <Box component="span" sx={{ color: "primary.main" }}>
            Download
          </Box>
        </Typography>
        <Fab
          variant="extended"
          color="primary"
          sx={{ marginTop: "1rem", textTransform: "none" }}
        >
          <CloudDownloadIcon sx={{ mr: 1 }} />
          Download All Genome
        </Fab>
      </Box>
    </ThemeProvider>
  );
}
